<template>
	<view class="reward-box-packbox relative"
		v-if="commonConfigs && commonConfigs.domainFrontFileLink"
		:style="{
			backgroundImage: `url(${commonConfigs.domainFrontFileLink}/files/images/common/home-goods-item-bg.png)`
		}"

	>
		<view class="flex-justify-content-center relative">
			<comPlaceImage
				class="reward-cover"
				:lazyLoad="true"
				:src="item.reward_pool_cover"
				mode="aspectFill"></comPlaceImage>
				
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.schedule_num"
				class="absolute"
				style="width: 48rpx;height: 46rpx;top: -10rpx;left: -10rpx;z-index: 1;"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/common/double-ball-icon.png`" mode="">
			</image>
				
			<!-- 欧皇赏 -->
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_open_mowang === 1" class="goods-tips absolute"  :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/tips-mowang.png`" mode=""></image>
			
			<!-- 飞机赏 -->
			<image v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_infinite === 1 && !item.schedule_num" class="goods-tips absolute"  :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/tips-infinite.png`" mode=""></image>
			
			<!-- type2 0 全局赏 -->
			<!-- 2 夺宝赏 join_xunbao_type 0 = 空车夺宝，1赠品夺宝 -->
			<image v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && tabPoolType === 1 && item.type2 === 2 && item.join_xunbao_type === 0" class="goods-tips absolute"  :src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/tips-xunbao-null.png`" mode=""></image>
			<image v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && tabPoolType === 1 && item.type2 === 2 && item.join_xunbao_type === 1" class="goods-tips absolute"  :src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/tips-xunbao-more.png`" mode=""></image>
			
			<!-- 1 天梯竞技 -->
			<image v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && tabPoolType === 1 && item.type2 === 1" class="goods-tips absolute" 
			:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/tips-pk.png`" mode=""></image>
			
			<!-- 3 全局赏 -->
			<image v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && tabPoolType === 1 && item.type2 === 3" class="goods-tips absolute"
			:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/tips-all.png`" mode=""></image>
			
			<!-- 4 一番赏 -->
			<image v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && tabPoolType === 1 && item.type2 === 4" class="goods-tips absolute"
			:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/tips-aplus.png`" mode=""></image>
			
		</view>

		<view class="absolute font-hanserif-bold flex-direction-column flex-end flex-justify-content-center" v-if="item.type && item.title"
		style="width: 292rpx;height: 44rpx;left: 0;top: 274rpx;right: 0;margin: 0 auto;" >
			<comAnimation :title="item.title"></comAnimation>
		</view>
		
		<view v-if="showNoticeTxtFun(item.reward_pool_name, 10)" class="flex-align-items-center notices-txt">
			<uni-notice-bar
				class="uni-notice-bar font-hanserif-bold"
				color="#FFF"
				background-color="transparent"
				:scrollable="true"
				:single="true"
				:text="showNoticeTxtFun(item.reward_pool_name, 10)"
				:speed="54"
			></uni-notice-bar>
		</view>
		<view v-else class="flex mult-truncates font-hanserif-bold relative product-name">
			{{ item.reward_pool_name }}
		</view>
		
		<!-- type2	string	类型-5为DIY 6为普通开箱 -->
		<view class="reward-nums relative font-hanserif-bold" v-if="item.type2 !== 5">
			<text>￥</text>
			<text class="reward-price" v-if="item.type" style="margin-right: 6rpx;">{{ item.preferential_price }}</text>
			
			<text class="reward-price" :style="{
				'color': item.type && item.type2 !== 6 ? '#CCC' : '#79F6FF',
				'text-decoration': item.type && item.type2 !== 6 ? 'line-through' : 'unset',
				'margin-left': '6rpx',
				'margin-right': '6rpx',
			}">{{ item.reward_price_1 }}</text>
			
			<view v-if="tabPoolType === 1 || item.type2 === 6" class="flex-align-items-center absolute" style="top: 6rpx;right: 46rpx; font-size: 22rpx;">
				<image class="block" style="margin-right: 6rpx;width: 21rpx;height: 16rpx;margin-top: 8rpx;"
					src="/static/images/box_icon.png" mode="">
				</image>
				
				<text style="color: #79F6FF;">{{item.has_stock_box_num || 0}}</text>/<text>{{item.total_box_num || 0}}</text>箱
			</view>
			
		</view>
	</view>
</template>

<script>
	import store from '@/store';

	export default {
		name: 'comRewardItem',
		props: {
			tabPoolType:Number,
			item: {
				type: Object,
				default: () => {}
			},
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		data() {
			return {
				
			}
		},
		created() {},
		methods:{
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
		}
	};
</script>

<style lang="scss">
	.reward-box-packbox {
		width: 344rpx;
		height: 482rpx; 
		background-size: 100% 100%;
		margin-bottom: 22rpx;
		
		.reward-cover {
			width: 320rpx;
			height: 320rpx;
			// margin-left: 12rpx;
			margin-top: 12rpx;
			margin-bottom: 12rpx;
			overflow: hidden;
			border-radius: 16rpx;
		}
		
		.goods-tips {
			width: 110rpx;
			height: 110rpx;
			left: 0rpx;
			top: 0rpx;
			z-index: 10;
		}
		
		.notices-txt {
			font-size: 28rpx;
			padding: 6rpx 35rpx 0;
		}
		.uni-notice-bar {
			flex: 1;
			height: 34rpx;
			font-size: 28rpx;
		}
		
		.product-name {
			height: 72rpx;
			margin: 10rpx 0 6rpx;
			padding-top: 6rpx;
			// padding-left: 35rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			width: 100%;
		}
		
		.reward-nums {
			padding-left: 20rpx;
			margin-top: 6rpx;
			font-size: 20rpx;
			color: #79F6FF;
			.reward-price {
				font-size: 28rpx;
				
			}
		}
	}
</style>
